{% extends "base.html" %}
    {% block head_add %}
        <link rel="stylesheet" type="text/css" href="../static/css/logo.css">
        <link rel="stylesheet" type="text/css" href="../static/css/index.css">
    {% endblock %}
{% block page_content %}
<div class="container">
    <div class="row">
        <div class="col-md-12" style="padding: 5rem;text-align:center;">
            <div class="mylogo">
                 <span>南开新闻全知道</span>
            </div>
            <form action="{{ url_for('front._result_page') }}" method="get">
                <div class="input-group" style="font-size: 14px; position: relative;">
                    <label style="width:100%;vertical-align:middle;">
                        <input type="text" class="form-control" name="keywords" placeholder="请输入您想搜索的关键词：" style="width: 100% ;max-width: 584px;border-radius: 24px;margin: 0 auto">
                        <!-- Search history list -->
                        {% if search_history %}
                        <div class="search-history">
                            {% for i in search_history %}
                            <a href="{{ url_for('front._result_page', keywords=i) }}" class="list-group-item list-group-item-action">{{ i }}</a>
                            {% endfor %}
                        </div>
                        {% endif %}
                    </label>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
{{ bootstrap.load_js() }}
<script>
document.addEventListener('DOMContentLoaded', function() {
    var input = document.querySelector('input[name="keywords"]');
    var historyList = document.querySelector('.search-history');

    input.addEventListener('focus', function() {
        historyList.style.display = 'block';
    });

    document.addEventListener('click', function(event) {
        if (!input.contains(event.target) && !historyList.contains(event.target)) {
            historyList.style.display = 'none';
        }
    });
});
</script>
{% endblock %}